{% load staticfiles %}
<!DOCTYPE HTML>
<html>
	<head>
		<title>尽搜己用</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<!--[if lte IE 8]><script src="static/assets/js/ie/html5shiv.js"></script><![endif]-->
<!--		<link rel="stylesheet" href="static/assets/css/main.css" />-->
		<!--[if lte IE 9]><link rel="stylesheet" href="static/assets/css/ie9.css" /><![endif]-->
		<!--[if lte IE 8]><link rel="stylesheet" href="static/assets/css/ie8.css" /><![endif]-->
		<!--==========Dependency============-->
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/vendors/owl-carousel/assets/owl.carousel.css">
<link rel="stylesheet" href="/static/vendors/magnific-popup/magnific-popup.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit:500">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:600,700italic">
<link href='https://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,800,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:400,300,300italic,400italic">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,500,700italic,700,900,900italic' rel='stylesheet' type='text/css'>

<!--==========Theme Styles==========-->
<link href="/static/css/serach_reslutcss.css" rel="stylesheet">
<link href="/static/css/theme/green.css" rel="stylesheet">
		<style type="text/css">
				.inner2 {
		position: fixed;
		top: 0px;
	}
			.inner2 {
    padding: 1.66667em 1.66667em 1.33333em 1.66667em;
    width: 24em;
}
			#menu ul a, #menu ul span {
    border-bottom: 0;
    color: inherit;
    cursor: pointer;
    display: block;
    font-size: 0.9em;
    padding: 0.625em 0;
}
			#menu ul {
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #3d4449;

    /* letter-spacing: 0.075em; */
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    text-transform: uppercase;
}
			#sidebar h2 {
    font-size: 1.38889em;
				font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;

    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
			#menu > ul > li {
    border-top: solid 1px rgba(210, 215, 217, 0.75);
    margin: 0.5em 0 0 0;
    padding: 0.5em 0 0 0;
}
            	#search form {
		text-decoration: none;
		position: relative;
	}

		#search form:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		#search form:before {
			-moz-transform: scaleX(-1);
			-webkit-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			transform: scaleX(-1);
			color: #7f888f;
			content: '\f002';
			cursor: default;
			display: block;
			font-size: 1.5em;
			height: 2em;
			line-height: 2em;
			opacity: 0.325;
			position: absolute;
			right: 0;
			text-align: center;
			top: 0;
			width: 2em;
		}

		#search form input[type="text"] {
			padding-right: 2.75em;
		}

	#sidebar {
		-moz-flex-grow: 0;
		-webkit-flex-grow: 0;
		-ms-flex-grow: 0;
		flex-grow: 0;
		-moz-flex-shrink: 0;
		-webkit-flex-shrink: 0;
		-ms-flex-shrink: 0;
		flex-shrink: 0;
		-moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
		-webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
		-ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
		transition: margin-left 0.5s ease, box-shadow 0.5s ease;
		background-color: #f5f6f7;
		font-size: 0.9em;
		position: relative;
		width: 26em;
	}

		#sidebar h2 {
			font-size: 1.38889em;
		}

		#sidebar > .inner {
			padding: 2.22222em 2.22222em 2.44444em 2.22222em ;
			position: relative;
			width: 26em;
		}

			#sidebar > .inner > * {
				border-bottom: solid 2px rgba(210, 215, 217, 0.75);
				margin: 0 0 3.5em 0;
				padding: 0 0 3.5em 0;
			}

				#sidebar > .inner > * > :last-child {
					margin-bottom: 0;
				}

				#sidebar > .inner > *:last-child {
					border-bottom: 0;
					margin-bottom: 0;
					padding-bottom: 0;
				}

			#sidebar > .inner > .alt {
				background-color: #eff1f2;
				border-bottom: 0;
				margin: -2.22222em 0 4.44444em -2.22222em;
				padding: 2.22222em;
				width: calc(100% + 4.44444em);
			}

		#sidebar .toggle {
			text-decoration: none;
			-moz-transition: left 0.5s ease;
			-webkit-transition: left 0.5s ease;
			-ms-transition: left 0.5s ease;
			transition: left 0.5s ease;
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
			border: 0;
			display: block;
			height: 7.5em;
			left: 26em;
			line-height: 7.5em;
			outline: 0;
			overflow: hidden;
			position: absolute;
			text-align: center;
			text-indent: 7.5em;
			top: 0;
			width: 6em;
			z-index: 10000;
		}

			#sidebar .toggle:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			#sidebar .toggle:before {
				content: '\f0c9';
				font-size: 2rem;
				height: inherit;
				left: 0;
				line-height: inherit;
				position: absolute;
				text-indent: 0;
				top: 0;
				width: inherit;
			}

		#sidebar.inactive {
			margin-left: -26em;
		}

		@media screen and (max-width: 1680px) {

			#sidebar {
				width: 24em;
			}

				#sidebar > .inner {
					padding: 1.66667em 1.66667em 1.33333em 1.66667em ;
					width: 24em;
				}

					#sidebar > .inner > .alt {
						margin: -1.66667em 0 3.33333em -1.66667em;
						padding: 1.66667em;
						width: calc(100% + 3.33333em);
					}

				#sidebar .toggle {
					height: 6.25em;
					left: 24em;
					line-height: 6.25em;
					text-indent: 5em;
					width: 5em;
				}

					#sidebar .toggle:before {
						font-size: 1.5rem;
					}

				#sidebar.inactive {
					margin-left: -24em;
				}

		}

		@media screen and (max-width: 1280px) {

			#sidebar {
				box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
				height: 100%;
				left: 0;
				position: fixed;
				top: 0;
				z-index: 10000;
			}

				#sidebar.inactive {
					box-shadow: none;
				}

				#sidebar > .inner {
					-webkit-overflow-scrolling: touch;
					height: 100%;
					left: 0;
					overflow-x: hidden;
					overflow-y: auto;
					position: absolute;
					top: 0;
				}

					#sidebar > .inner:after {
						content: '';
						display: block;
						height: 4em;
						width: 100%;
					}

				#sidebar .toggle {
					text-indent: 6em;
					width: 6em;
				}

					#sidebar .toggle:before {
						font-size: 1.5rem;
						margin-left: -0.4375em;
					}

				body.is-loading #sidebar {
					display: none;
				}

		}

		@media screen and (max-width: 736px) {

			#sidebar .toggle {
				text-indent: 7.25em;
				width: 7.25em;
			}

				#sidebar .toggle:before {
					color: #7f888f;
					margin-left: -0.0625em;
					margin-top: -0.25em;
					font-size: 1.1rem;
					z-index: 1;
				}

				#sidebar .toggle:after {
					background: rgba(222, 225, 226, 0.75);
					border-radius: 0.375em;
					content: '';
					height: 3.5em;
					left: 1em;
					position: absolute;
					top: 1em;
					width: 5em;
				}

		}
		</style>
</head>
<body class="home">

<!--========== HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries ==========-->
<!--========== WARNING: Respond.js doesn't work if you view the page via file:// ==========-->
<!--==========[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
	</head>
	<body>

		<! -- Wrapper -->
            				<!-- Main -->
					<div id="main">
						<div class="inner">
									<section class="row content-wrap">
    <div class="container">
        <div class="row" id="post-masonry">


{% block content %}
                    <!--Blog Post-->
                            {% for ctrip in ctriplist %}
            <article class="col-sm-4 post post-masonry post-format-image">
                <div class="post-wrapper row">
                    <div class="featured-content row">
                        <a href="{{ ctrip.href }}"><img src="http://{{ ctrip.pic_href }}" width="350" height="202" alt="" class="img-responsive"></a>
                    </div>
                    <div class="post-excerpt row">
                        <h5 class="post-meta">
{#                            <a href="#" class="date">feb 17, 2016</a>#}
                            <span class="post-author"><i>by</i><a href="#">携程</a></span>
                        </h5>
                        <h3 class="post-title"><a href="{{ ctrip.href }}">{{ ctrip.name }}</a></h3>
                        <p>{{ ctrip.location }}</p>
                        <footer class="row">
                            <h5 class="taxonomy"><i>评分:</i>{{ ctrip.score }},价格:{{ ctrip.people_num }}</h5>
{#                            <div class="response-count"><img src="images/comment-icon-gray.png" alt="">5</div>#}
                        </footer>
                    </div>
                </div>
            </article>
            {% endfor %}


            <!--Blog Post-->
                            {% for meituan in meituanlist %}
            <article class="col-sm-4 post post-masonry post-format-image">
                <div class="post-wrapper row">
                    <div class="featured-content row">
                        <a href="{{ meituan.href }}"><img src="/static/images/defalut_hotel_img.jpg" width="350" height="202" alt="" class="img-responsive"></a>
                    </div>
                    <div class="post-excerpt row">
                        <h5 class="post-meta">
{#                            <a href="#" class="date">feb 17, 2016</a>#}
                            <span class="post-author"><i>by</i><a href="#">美团</a></span>
                        </h5>
                        <h3 class="post-title"><a href="{{ meituan.href }}">{{ meituan.name }}</a></h3>
                        <p>{{ meituan.tag }}</p>
                        <p>地址:{{ meituan.location }}</p>
                        <footer class="row">
{#                            <h5 class="taxonomy"><i>价钱:</i><a href="#">{{ tuniu.price }}</a></h5>#}
                            <h5 class="taxonomy">评分:{{ meituan.score }}类型:{{ meituan.star }},消费:{{ meituan.people_num }}</h5>
{#                            <div class="response-count"><img src="images/comment-icon-gray.png" alt="">5</div>#}
                        </footer>
                    </div>
                </div>
            </article>
            {% endfor %}

{% endblock %}
        </div>
    </div>
</section>

                        </div>
                    </div>
				<!-- Sidebar -->
					<div id="sidebar">
						<div class="inner2">
							<!-- Menu -->
								<nav id="menu">
									<header class="major">
										<a href="/index3"><h2>菜单选项</h2></a>
									</header>
									<ul>
										<li><a href="{% url 'onlineshop' %}">网购</a></li>
										<li><a href="{% url 'hotel' %}">酒店</a></li>
										<li><a href="{% url 'travel' %}">旅游</a></li>
										<li><a href="{% url 'cate' %}">美食</a></li>
                                        <li><a href="{% url 'map' %}">地图</a></li>
                                        <li><a href="{% url 'food' %}">食物相克</a></li>
									</ul>
								</nav>


						</div>
					</div>


		<!-- Scripts -->
			<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
			<script src="/static/assets/js/skel.min.js"></script>
			<script src="/static/assets/js/util.js"></script>
			<!--[if lte IE 8]><script src="static/assets/js/ie/respond.min.js"></script><![endif]-->
			<script src="/static/assets/js/main.js"></script>
		<script src="/static/js/jquery-2.2.0.min.js"></script>
		<script src="/static/bootstrap.min.js"></script>
		<script src="/static/vendors/owl-carousel/owl.carousel.min.js"></script>
		<script src="/static/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
		<script src="/static/vendors/instafeed/instafeed.min.js"></script>
		<script src="/static/vendors/imagesLoaded/imagesloaded.pkgd.min.js"></script>
		<script src="/static/vendors/isotope/isotope.pkgd.min.js"></script>
		<script src="/static/js/theme.js"></script>

	</body>
</html>